<template>
<div>
    <a-card
        :body-style="{ padding: '24px 32px' }"
        :bordered="false"
    >
        <title-name title="竣工设置详情" />
        <a-form-model
            ref="completedForm"
            :model="completedData"
            v-bind="completedLayout"
        >
            <a-row>
            <a-col :span="24" >
                <a-form-model-item
                label="实际竣工时间"
                >
                <a-date-picker
                    v-model="completedData.completionTime"
                    value-format="YYYY-MM-DD"
                    disabled
                />
                </a-form-model-item>
            </a-col>
            <a-col :span="24">
                <a-form-model-item
                label="备注"
                prop="remark"
                >
                <a-textarea
                    disabled
                    v-model="completedData.remark"
                    :placeholder="completedData.remark?completedData.remark:'无'"
                    :auto-size="{ minRows: 3, maxRows: 6 }"
                />
                </a-form-model-item>
            </a-col>
            <a-col :span="24">
                <a-form-model-item
                label="附件"
                >
                <l-table
                    disabled
                    :upload-arrys="completedData.fileList"
                    business-code="MM16"
                    count="12"
                />
                </a-form-model-item>
            </a-col>
            </a-row>
        </a-form-model>
    </a-card>
    <a-form>
      <a-spin
        :spinning="spinning"
        tip="项目信息加载中..."
      >
        <a-card
          :body-style="{ padding: '24px 32px' }"
          :bordered="false"
        >
          <title-name title="项目、岗位设置、立项附件信息" />
          <a-tabs
            ref="tabs"
            v-model="nextSteps"
            @change="callback"
          >
            <a-tab-pane
              :key="1"
              tab="项目信息"
            >
              <a-row :gutter="24">
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="工程承包模式"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.contractModelName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="承包类型"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.innerPackageName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  v-if="isContract"
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="专业承包公司"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.contractBranchName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>

                <template v-if="isGeneral">
                  <a-col
                    :md="8"
                    :sm="8"
                  >
                    <a-form-model-item
                      label="总承包项目是否内部项目"
                      :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                      :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                      prop="epcIsInnerProject"
                    >
                      <BaseInput
                        :value="dels.epcIsInnerProject?'是':'否'"
                        type="text"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col
                    :md="8"
                    :sm="8"
                  >
                    <a-form-item
                      label="总承包单位"
                      :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                      :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                    >
                      <BaseInput
                        v-model="dels.generalContractorCompanyName"
                        type="text"
                        disabled
                      />
                    </a-form-item>
                  </a-col>
                  <a-col
                    :md="8"
                    :sm="8"
                  >
                    <a-form-model-item
                      label="分包合同额（万）"
                      :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                      :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                      prop="subContractAmount"
                    >
                      <BaseInput
                        v-model="dels.subContractAmount"
                        type="text"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col
                    :md="24"
                    :sm="24"
                  >
                    <a-form-model-item
                      label="备注"
                      :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                      :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                      prop="remark"
                    >
                      <BaseTextarea
                        v-model="dels.remark"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                </template>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="项目备案名称"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.projectName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="项目简称"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.projectOmit"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="项目编号"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.projectNum"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="中标时间"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.winningTime"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="一级地域"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.oneAreaName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="二级地域"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.secondAreaName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="三级地域"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.threeAreaName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="四级地域"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.fourAreaName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="地理坐标"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInputNumber
                      v-model="dels.longitude"
                      type="text"
                      style="margin-right: 20px; width: 100px !important; float: left"
                      disabled
                    />
                    <BaseInputNumber
                      v-model="dels.latitude"
                      type="text"
                      style="width: 100px !important; float: left"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="24"
                  :sm="24"
                >
                  <a-form-item
                    label="详细地址"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseTextarea
                      v-model="dels.projectAddress"
                      :title="dels.projectAddress"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="区域一级管辖单位(所属办事处)"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.jurisdictionOneName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="区域二级管辖单位(所属办事处)"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.jurisdictionTwoName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="签约单位"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.contractUnit"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="承接名义"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.undertakeName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="实施单位(所属二级单位)"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.implementationTwoName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="实施单位(所属三级单位)"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.implementationThreeName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="项目类型"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.projectTypeName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="项目业态"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.projectFormatName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="结构类型"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.structureTypeName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="项目重要程度"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.projectImportanceName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="是否为重点项目"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.keyProjectsName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="工程类型"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.engineeringTypeName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="工程性质"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.projectNatureName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="局级大客户"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.bureauCustomerName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="公司级大客户"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.companyCustomerName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="客户级别"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.customerLevelName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="设计单位名称"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.designUnitName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="建设单位名称"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.constructionName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="建设单位性质"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.constructionNatureName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="建设单位社会统一信用代码"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.constructionCode"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="审计单位名称"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.auditName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="监理单位名称"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.supervisionName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="勘察单位名称"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.surveyName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="咨询单位名称"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.consultingName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="是否签订合同"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <a-radio-group
                      v-model="dels.contractCode"
                      disabled
                    >
                      <a-radio :value="1">
                        已签订
                      </a-radio>
                      <a-radio :value="0">
                        未签订
                      </a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
                <a-col
                  v-if="isContractMileage"
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="合同工程里程(Km)"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.contractMileage"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <template
                  v-if="isConstruction"
                  :gutter="24"
                >
                  <a-col
                    :md="8"
                    :sm="8"
                  >
                    <a-form-item
                      label="合同建筑面积-地上(万m2)"
                      :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                      :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                    >
                      <BaseInput
                        v-model="dels.contractAreaGround"
                        type="text"
                        disabled
                      />
                    </a-form-item>
                  </a-col>

                  <a-col
                    :md="8"
                    :sm="8"
                  >
                    <a-form-item
                      label="合同建筑面积-地下(万m2)"
                      :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                      :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                    >
                      <BaseInput
                        v-model="dels.contractAreaUnderground"
                        type="text"
                        disabled
                      />
                    </a-form-item>
                  </a-col>

                  <a-col
                    :md="8"
                    :sm="8"
                  >
                    <a-form-item
                      label="地上层数"
                      :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                      :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                    >
                      <BaseInput
                        v-model="dels.groundFloor"
                        type="text"
                        disabled
                      />
                    </a-form-item>
                  </a-col>
                  <a-col
                    :md="8"
                    :sm="8"
                  >
                    <a-form-item
                      label="地下层数"
                      :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                      :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                    >
                      <BaseInput
                        v-model="dels.undergroundFloor"
                        type="text"
                        disabled
                      />
                    </a-form-item>
                  </a-col>
                  <a-col
                    :md="8"
                    :sm="8"
                  >
                    <a-form-item
                      label="合同建筑总面积(万m2)"
                      :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                      :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                    >
                      <BaseInput
                        v-model="dels.contractTotalArea"
                        type="text"
                        disabled
                      />
                    </a-form-item>
                  </a-col>
                </template>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="合同单体工程个数"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.contractSingleProject"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    :label="engineeringMetersLabel"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.engineeringMeters"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <!--<a-col :md="8" :sm="8">-->
                <!--<a-form-item-->
                <!--label="维保期时间"-->
                <!--:labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"-->
                <!--:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"-->
                <!--&gt;-->
                <!--<BaseInput v-model="dels.maintenanceTime" type="text" disabled></BaseInput>-->
                <!--</a-form-item>-->
                <!--</a-col>-->
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="合同开工日期"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <a-date-picker
                      v-model="dels.contractStartDate"
                      disabled
                      placeholder="请选择日期"
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="合同竣工日期"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <a-date-picker
                      v-model="dels.contractEndDate"
                      disabled
                      style=""
                      placeholder="请选择日期"
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="合同工期(天)"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.contractDays"
                      disabled
                      placeholder="合同工期"
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="合同额(万)"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.contractValue"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="自有施工合同额(万)"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.ownerContractValue"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="专业工程暂估价总额(万)"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.estimateTotalAmount"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="备案项目经理"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.projectManagerName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="24"
                  :sm="24"
                >
                  <a-form-item
                    label="项目特点或难点"
                    :label-col="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapper-col="{ lg: { span: 16 }, sm: { span: 16 } }"
                  >
                    <BaseInput
                      v-model="dels.projectFeatures"
                      type="textarea"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="24"
                  :sm="24"
                >
                  <a-form-item
                    label="主施工范围"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.mainScope"
                      type="textarea"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="计划创优级别"
                    :label-col="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapper-col="{ lg: { span: 16 }, sm: { span: 16 } }"
                  >
                    <BaseInput
                      v-model="dels.excellencePlanName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="计划创优内容"
                    :label-col="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapper-col="{ lg: { span: 16 }, sm: { span: 16 } }"
                  >
                    <BaseInput
                      v-model="dels.meritContentName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="计划观摩级别"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.observePlanName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="24"
                  :sm="24"
                >
                  <a-form-item
                    label="计划观摩内容"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.observeContent"
                      type="textarea"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="项目设计管理类别"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.designName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="项目科技管理类别"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.technologyName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :md="8"
                  :sm="8"
                >
                  <a-form-item
                    label="项目类别（质量）"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                  >
                    <BaseInput
                      v-model="dels.qualityName"
                      type="text"
                      disabled
                    />
                  </a-form-item>
                </a-col>

                <a-button
                  style="float: right; margin-top: 20px"
                  type="primary"
                  @click="nextStep()"
                >
                  下一页
                </a-button>
              </a-row>

              <div class="floatRight maginTop">
                <a-button
                  style="margin-right:20px"
                  type="primary"
                  @click="toStep(2)"
                >
                  查看项目部设置
                </a-button>
                <a-button
                  type="primary"
                  @click="toStep(3)"
                >
                  查看立项附件
                </a-button>
              </div>
            </a-tab-pane>

            <a-tab-pane
              :key="2"
              tab="项目部设置"
            >
              <title-name title="项目领导班子人员配置" />
              <a-table
                :columns="columns"
                :data-source="projectPost"
                bordered
              >
                <span
                  slot="serial"
                  slot-scope="text, record, index"
                >{{ index + 1 }}</span>
                <span
                  slot="employeeName"
                  slot-scope="record"
                >
                  <template>
                    {{ record.staffList.map(s=>s.staffName).join(',') }}
                  </template>
                </span>
                <span
                  slot="employeeNum"
                  slot-scope="record"
                >
                  <template>
                    <span
                      v-for="(staff,index) in record.staffList"
                      :key="staff"
                    >
                      <span v-if="index !=0 ">,</span>
                      <sapn
                        v-if="staff.statusCode == 0 "
                        style="color:rgba(0, 0, 0, 0.65)"
                      >{{ staff.staffCode }}</sapn>
                      <sapn
                        v-else-if="staff.statusCode != 0 "
                        style="color:red;"
                      >{{ staff.staffCode }}</sapn>
                    </span>
                  </template>
                </span>
                <span
                  slot="status"
                  slot-scope="record"
                >
                  <template>
                    {{ record.staffList.map(s=>s.statusName).join(',') }}
                  </template>
                </span>
              </a-table>
              <title-name
                title="其他岗位人员配置"
                class="maginTop"
              />

              <a-table
                :columns="columns"
                :data-source="otherPost"
                bordered
              >
                <span
                  slot="serial"
                  slot-scope="text, record, index"
                >{{ index + 1 }}</span>
                <span
                  slot="employeeName"
                  slot-scope="record"
                >
                  <template>
                    {{ record.staffList.map(s=>s.staffName).join(',') }}
                  </template>
                </span>
                <span
                  slot="employeeNum"
                  slot-scope="record"
                >
                  <template>
                    <span
                      v-for="(staff,index) in record.staffList"
                      :key="staff"
                    >
                      <span v-if="index !=0 ">,</span>
                      <sapn
                        v-if="staff.statusCode == 0 "
                        style="color:rgba(0, 0, 0, 0.65)"
                      >{{ staff.staffCode }}</sapn>
                      <sapn
                        v-else-if="staff.statusCode != 0 "
                        style="color:red;"
                      >{{ staff.staffCode }}</sapn>
                    </span>
                  </template>
                </span>
                <span
                  slot="status"
                  slot-scope="record"
                >
                  <template>
                    {{ record.staffList.map(s=>s.statusName).join(',') }}
                  </template>
                </span>
              </a-table>
              <div class="floatRight maginTop">
                <a-button
                  style="margin-right:20px"
                  type="primary"
                  @click="toStep(1)"
                >
                  查看项目信息
                </a-button>
                <a-button
                  type="primary"
                  @click="toStep(3)"
                >
                  查看立项附件
                </a-button>
              </div>
            </a-tab-pane>

            <a-tab-pane
              :key="3"
              tab="附件"
            >
              <u-table
                :list-url="listUrl"
                :business-id="id"
                business-code="PM01"
              />
              <div class="floatRight maginTop">
                <a-button
                  style="margin-right:20px"
                  type="primary"
                  @click="()=>toStep(1)"
                >
                  查看项目信息
                </a-button>
                <a-button
                  type="primary"
                  @click="()=>toStep(2)"
                >
                  查看项目部设置
                </a-button>
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-spin>
    </a-form>
</div>
</template>

<script>
    const columns = [
        {
            title: '序号',
            scopedSlots: { customRender: 'serial' }
        },
        {
            title: '岗位名称',
            dataIndex: 'jobName',
            width: '15%'
        },
        {
            title: '岗位人员姓名',
            width: '40%',
            scopedSlots: { customRender: 'employeeName' }
        },
        {
            title: '员工编号',
            scopedSlots: { customRender: 'employeeNum' }
        },
        {
            title: '状态',
            scopedSlots: { customRender: 'status' }
        }
    ]
    const columns1 = [
        {
            title: '序号',
            dataIndex: 'name',
            width: '10%',
            scopedSlots: { customRender: 'name' }
        },
        {
            title: '附件名称',
            dataIndex: 'annuxName',
            width: '15%',
            scopedSlots: { customRender: 'age' }
        },
        {
            title: '附件格式',
            dataIndex: 'annux',
            scopedSlots: { customRender: 'annux' }
        },
        {
            title: '附件地址',
            dataIndex: 'annuxAddress',
            width: '40%',
            scopedSlots: { customRender: 'annuxAddress' }
        },
        {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' }
        }
    ]
    import { projectCompletionDetail } from '@/api/projects'
    import { getDesignType, getProjectsDel, getDepartConfig, getProjectTypes } from '@/api/project/projects'
    import moment from 'moment'
    import Vue from 'vue'
    import pick from 'lodash.pick'
    export default {
        name: 'completionDetails',
        data() {
            return {
                spinning: false,
                completedData: {
                    completionTime: '',
                    remark: '',
                    fileList: [],
                },
                completedLayout: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 7 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 13 }
                    }
                },
                columns,
                columns1,
                listUrl: '/cscec-project-business/file/business/project-fileQuery',
                nextSteps: 1,
                dels: {},
                form: this.$form.createForm(this),
                status: 'all',
                areaCode: '',
                employeeNum: '', // 项目部设置人员调整编号
                isContractMileage: false, // 线性基础数据
                isConstruction: false, // 房建
                id: '', // 项目id
                branchCode: '', // 是否是分公司 科技管理中心
                isContract: false, // 专业承包分公司
                isGeneral: false, // 总承包公司
                designTypes: [],
                qualityTypes: [], // 项目类别 质量
                projectPost: [], // 项目人员岗位设置
                otherPost: [], //  其他人员岗位设置
                engineeringMetersLabel: '最高(长)单位工程米数(Km)',
            }
        },
        created() {
            this.getEditInfo()
            this.id = this.$route.query.businessId
            if (!this.id) {
            this.$error({ content: '无指定项目，将自动关闭' })
            setTimeout(() => {
                window.close()
            }, 1500)
            return
            }
            this.procInstId = this.$route.query.procInstId
            this.taskName = decodeURIComponent(this.$route.query.name)
            this.processName = decodeURIComponent(this.$route.query.processName)
            this.taskId = this.$route.query.taskId
            this.taskDefKey = this.$route.query.taskDefKey
            this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
            this.currentUser = Vue.getAcloudProvider().getUserInfo()
            document.title = this.processName + '-' + this.taskName
            this.getDesignType()
            this.getDepartConfig()
            this.getDepartConfigs()
            this.getProjectTypes()
        },
        methods: {
            getEditInfo() {
                const { businessId } = this.$route.query
                projectCompletionDetail(businessId).then(res=> {
                    if(res.code==200) {
                      this.getInstallationBranchId(res.data.projectId)
                        this.completedData = pick(res.data, Object.keys(this.completedData))
                    }
                })
            },
            nextStep() {
                if(this.nextSteps == 3) {
                    return
                }
                this.nextSteps++
            },
            callback(key) {
                // tabs切换
                this.nextSteps = key
            },
            toStep(step) {
                if (step !== 1 && step !== 2 && step !== 3) {
                    return
                }
                this.nextSteps = step
            },
            getProjectTypes() {
                getProjectTypes().then((res) => {
                    this.qualityTypes = res.data
                })
            },
            getDesignType() {
                getDesignType().then((res) => {
                    this.designTypes = res.data
                })
            },
        getInstallationBranchId(projectId) {
            this.spinning = true
            getProjectsDel({ projectId }).then((res) => {
                this.dels = res.data
                if (this.dels.contractModelCode == 'zycb' && this.dels.innerPackageCode == 0) {
                    this.isGeneral = true // 总承包
                    this.isContract = false // 专业承包
                }
                if (this.dels.contractModelCode == 'zycb' && this.dels.innerPackageCode == 1) {
                    this.isGeneral = false // 总承包
                    this.isContract = true // 专业承包
                }
                if (this.dels.contractModelCode != 'zycb' && this.dels.innerPackageCode == 1) {
                    this.isGeneral = false // 总承包
                    this.isContract = true // 专业承包
                }
                if (this.dels.contractModelCode != 'zycb' && this.dels.innerPackageCode == 0) {
                    this.isGeneral = false // 总承包
                    this.isContract = false // 专业承包
                }

                if (this.dels.calculateTypeCode == '0') {
                    this.isContractMileage = false
                    this.isConstruction = true
                } else {
                    this.isContractMileage = true
                    this.isConstruction = false
                }
                this.dels.innerPackageName = res.data.innerPackageCode === 0 ? '自主承包' : '内部承包'
                // 项目类型为其他改变最高(长)单位工程米数字段名字
                if (this.dels.projectTypeCode === '638571526815358976') {
                    // 其他
                    this.engineeringMetersLabel = '最高(长)单位工程米数(km)'
                } else if (this.dels.projectTypeCode === '638571485077839872') {
                    // 线性基础设施
                    this.engineeringMetersLabel = '最长单位工程里程(km)'
                } else if (this.dels.projectTypeCode === '638571399132356608') {
                    // 房建
                    this.engineeringMetersLabel = '最高单位工程米数(米)'
                } else {
                    this.engineeringMetersLabel = '最高(长)单位工程米数(km)'
                }
                this.spinning = false
            })
            .catch(() => {
            this.spinning = false
            })
        },
        getDepartConfig() {
            // 项目岗位设置
            let proId = this.id
            getDepartConfig({ projectId: proId, projectJobType: 1 }).then((res) => {
                this.projectPost = res.data.postConfigList
            })
        },
        getDepartConfigs() {
            // 其他岗位设置
            let proId = this.id
            getDepartConfig({ projectId: proId, projectJobType: 0 }).then((res) => {
                this.otherPost = res.data.postConfigList
            })
        },
        }
    }
</script>